<template>
    <div class="data-analysis">
        <div class="page-title" v-if="showTitle">
            <img class="logo" src="../../styles/logo.svg">
            <span class="name">
                <!-- <iconSvg name="g6change" w="25" style="color:#fff" @click.native="backToG6page('g6')"></iconSvg> -->
            </span>
            <div class="iconbg" @click="backToHomepage"  v-focusable>
                <span class="iconfont">&#xe668;</span>
            </div>
        </div>
        <Application></Application>
        <div class="tab-header" v-if="!chartShareCode">
            <tab class="newpage_tab" style="z-index:0" active-color="#456de6" default-color="#fff" custom-bar-width="80%">
                <tab-item v-for="(item, index) in boardList" @on-item-click="selectBoard(item.id)" :key="index" :selected="tabIndex == index">
                    {{ item.name }}
                </tab-item>
            </tab>
        </div>
        <div class="tab-content">
            <template v-for="(groupItem, groupindex) in widgetGroups">
                <div class="layout-box" :key="groupindex" v-if="isReady && widgetGroups.length > 0">
                    <template v-if="groupItem.type === 2">
                        <template v-for="(widgetItem, widgetIndex) in groupItem.widgets">
                            <div class="chart-box card-box" :class="{ active: groupItem.indicatorIndex === widgetIndex }" :key="widgetIndex">
                                <!-- <div class="edit" v-if="card < 1">空白<br />指标卡</div> -->
                                <ChartView :name="groupItem.widgetLayouts[widgetIndex].nameAlias" :config="JSON.parse(widgetItem.config)"></ChartView>
                            </div>
                        </template>
                    </template>
                    <div class="chart-box" v-else>
                        <div class="chart-title">
                            <span>
                                {{ groupItem.name }}
                            </span>
                            <div class="group-list" v-if="groupItem.widgetLayouts && groupItem.widgetLayouts.length > 1">
                                <span class="list-item" :class="{ active: groupItem.widgetIndex === widgetIndex }" @click="changeWidgetIndex(groupItem, widgetIndex)" v-for="(widgetItem, widgetIndex) in groupItem.widgets" :key="widgetIndex">{{ groupItem.widgetLayouts[widgetIndex].nameAlias }}</span>
                            </div>
                        </div>
                        <ChartView :groupItem="groupItem" :name="groupItem.name" :config="JSON.parse(groupItem.widgets[groupItem.widgetIndex].config)" info="manage" @changeWidgetIndex="changeWidgetIndex"></ChartView>
                    </div>
                </div>
            </template>
            <!-- <div class="layout-box" v-for="(item, index) in curLayout" :key="index" v-if="isReady && curBoard.widgets.length > 0">
                <template v-if="JSON.parse(curBoard.widgets[idIndexs[item[0]]].config).type == '3'">
                    <div class="chart-box card-box" v-for="(card,i) in item" v-if="item[4] ? (i < item[4]) : (i < 2)" :key="i">
                        <div class="edit" v-if="card < 1"><div class="num">0</div>空指标卡</div>
                        <ChartView v-else :name="curBoard.widgets[idIndexs[card]].name" :config="JSON.parse(curBoard.widgets[idIndexs[card]].config)"></ChartView>
                    </div>
                </template>
                <div class="chart-box" v-else>
                    <div class="chart-title">{{curBoard.widgets[idIndexs[item[0]]].name}}</div>
                    <ChartView :name="curBoard.widgets[idIndexs[item[0]]].name" :config="JSON.parse(curBoard.widgets[idIndexs[item[0]]].config)"></ChartView>
                </div>
            </div> -->
            <div v-transfer-dom>
                <Loading :show="!isReady" text="加载中"></Loading>
            </div>
            <div class="error-tips" v-if="isReady && !chartShareCode && boardList.length < 1"><span><i class="el-icon-warning-outline"></i>看板不存在，请先到PC端添加</span></div>
            <div class="error-tips" v-if="isReady && chartShareCode && shareError"><span><i class="el-icon-warning-outline"></i>{{ shareError }}</span></div>
        </div>
    </div>
</template>

<script>
import DataAnalysisDao from "@/daos/data_analysis_dao"
import ChartView from './chart_view/chart_view'

import Application from "@/components/common/application";
import { Tab, TabItem, Loading, TransferDomDirective as TransferDom } from 'vux'

export default {
    name: "dataAnalysis",
    directives: {
        TransferDom
    },
    components: {
        Tab,
        TabItem,
        ChartView,
        Application,
        Loading
    },
    data() {
        return {
            showTitle: true,
            isReady: false,
            boardList: [],
            curBoardId: '0',
            tabIndex: 0,
            curBoard: {},
            idIndexs: [],
            layouts: [],
            widgetGroups: [],
            shareError: ""
        }
    },
    computed: {
        curLayout() {
            if (this.isJSON(this.curBoard && this.curBoard.layout)) {
                return JSON.parse(this.curBoard.layout);
            } else {
                return [];
            }
        },
        chartShareCode() {
            return this.$route.query.chartShareCode;
        }
    },
    //返回首页的公共方法
    inject: ["backToHomepage", 'backToG6page'],
    methods: {
        // 刷新
        refresh() {
            this.isReady = false;
            this.$nextTick(() => {
                this.isReady = true;
            })
        },
        // 看板列表数据
        getUserBoardList() {
            DataAnalysisDao.getUserBoardList((data) => {
                this.boardList = data;
                this.shareError = "";
                if (data.length > 0) {
                    this.curBoardId = data[0].id;
                    this.curBoard = this.findBoardById(this.curBoardId);
                    // this.getChartById();
                    this.initLayout()
                } else {
                    this.isReady = true;
                }
            });
        },
        // 通过id查找看板
        findBoardById(id) {
            return this.boardList.find(item => {
                return item.id == id;
            });
        },
        // 选中看板
        selectBoard(id) {
            this.curBoardId = id;
            this.curBoard = this.findBoardById(this.curBoardId);
            this.initLayout();
        },
        initLayout(isFunc) {
            this.layouts = this.curBoard.layout.split(',');
            this.widgetGroups.splice(0, this.widgetGroups.length)
            // 按排序放置到新的widgetGroups里
            this.layouts.forEach(e => {
                this.curBoard.widgetGroups.forEach(ele => {
                    if (ele.id == e) {
                        let res = JSON.parse(JSON.stringify(ele))
                        res.widgets.splice(0, res.widgets.length)
                        let widgetSortList = JSON.parse(ele.widgetContent)
                        let widgetLayouts = widgetSortList.sort((a, b) => a.sort - b.sort)
                        widgetLayouts.forEach(widgetLayout => {
                            widgetLayout.id = widgetLayout.id + ""
                            ele.widgets.forEach(widget => {
                                if (widget.id == widgetLayout.id) {
                                    res.widgets.push(widget)
                                }
                            })
                        })
                        res.indicatorIndex = 0
                        res.widgetIndex = 0
                        res.widgetLayouts = widgetLayouts
                        this.widgetGroups.push(res)
                    }
                })
            })
            this.refresh();
        },
        changeWidgetIndex(item, index) {
            item.widgetIndex = index
            this.$vux.loading.show()
        },
        // 计算图表布局的位置
        getChartById() {
            this.idIndexs = {};
            this.curBoard.widgets.forEach((item, index) => {
                this.$set(this.idIndexs, item.id, index);
            });
            this.refresh();
        },
        // 判断字符串是否合法的json
        isJSON(str) {
            if (typeof (str) == 'string') {
                try {
                    let obj = JSON.parse(str);
                    if (typeof (obj) == 'object' && obj) {
                        return true;
                    } else {
                        return false;
                    }
                } catch (e) {
                    return false;
                }
            }
        },
        // 查看分享看板
        getBoardByShareCode() {
            DataAnalysisDao.getBoardByShareCode(this.chartShareCode, (data) => {
                this.boardList = [data];
                this.curBoardId = data.id;
                this.curBoard = data;
                // this.getChartById();
                this.initLayout()
                this.shareError = "";
            }, (error) => {
                this.refresh();
                this.shareError = "看板加载失败";
            });
        }
    },
    created() {
        if (this.chartShareCode) {
            this.getBoardByShareCode();
        } else {
            this.getUserBoardList();
        };
        if (this.$route.query.showTitle) {
            this.showTitle = false
        }
    }
}
</script>
<style lang="less">
.tab-header {
    .el-tabs__item {
        color: rgb(187, 187, 187);
    }

    .el-tabs__item.is-active {
        color: #fff;
    }

    .el-tabs__nav-wrap::after {
        background-color: transparent;
    }
}

.newpage_tab {
    .vux-tab {
        height: 45px !important;
        background: #22233f;

        .vux-tab-item {
            background: none;
            color: #fff;
        }
    }
}

.vux-loading .weui-toast {
    z-index: 29999999;
}
</style>
<style lang="less" scoped>
.data-analysis {
    background: #22233f;
    height: 100vh;
    display: flex;
    flex-direction: column;

    .page-title {
        font-size: 14px;
        color: #fff;
        display: flex;
        border-bottom: 1px solid #18182C;

        .logo {
            width: 46px;
            height: 46px;
            margin-left: 5px;
            flex-shrink: 0;
        }

        .name {
            width: 100%;
            line-height: 50px;
            padding: 0 10px;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .iconbg {
            width: 30px;
            height: 30px;
            line-height: 28px;
            text-align: center;
            flex-shrink: 0;
            border-radius: 50%;
            background: #03061c;
            border: 1px #456de6 solid;
            margin: 8px;
        }
    }

    .tab-header {
        border-bottom: 1px solid #18182C;
        padding: 8px 15px;
    }

    .tab-content {
        height: 100%;
        padding: 10px;
        background: #18182C;
        overflow: auto;

        .layout-box {
            margin-bottom: 8px;
            border: 1px solid transparent;
            box-sizing: border-box;
            display: flex;
            transition: all 0.05s;

            .chart-box {
                width: 100%;
                height: 280px;
                padding: 10px;
                margin: 0 5px;
                background: #23233D;
                color: #fff;
                text-align: center;
                font-size: 12px;
                position: relative;
                overflow: hidden;

                &:first-child {
                    margin-left: 0;
                }

                &:last-child {
                    margin-right: 0;
                }

                &.card-box {
                    height: 64px;
                    padding: 10px 2px;
                    box-sizing: border-box;
                    flex: 1;
                    overflow: hidden;
                    cursor: default;

                    .num,
                    .name {
                        width: 100%;
                        line-height: 18px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    .num {
                        line-height: 26px;
                        font-size: 20px;
                    }

                    .edit {
                        line-height: 18px;
                        padding: 5px 0;
                        color: #1D4FA0;
                    }

                    &.active {
                        color: #fff;
                        background-color: #456de6;
                    }
                }

                .chart-title {
                    font-size: 14px;
                    text-align: left;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .group-list {
                    font-size: 12px;
                    display: flex;
                    justify-content: center;
                    border: 1px solid #456de6;
                    border-radius: 2px;

                    .list-item {
                        padding: 0 12px;
                        text-align: center;
                        color: #456de6;
                        flex: 1;
                        white-space: nowrap;

                        &.active {
                            color: #fff;
                            background-color: #456de6;
                        }
                    }
                }

                .button {
                    display: none;
                }
            }

            &.active {
                border: 1px dashed #1D4FA0;

                &:hover {
                    .button {
                        width: 20px;
                        height: 20px;
                        line-height: 20px;
                        display: block;
                        background: #49A8F9;
                        cursor: pointer;
                        position: absolute;
                        top: 0;
                        right: 0;

                        &:hover {
                            background: #66b1ff;
                        }

                        &.del {
                            right: 21px;
                        }
                    }
                }
            }
        }

        .error-tips,
        .loading {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #fff;

            .ivu-icon {
                display: block;
                font-size: 40px;
                text-align: center;
                margin-bottom: 10px;
            }
        }
    }
}

// iview Tab样式
.ivu-tabs {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    color: #515a6e;
    zoom: 1;
    height: 50px;
    flex-shrink: 0;
}

.ivu-tabs:after,
.ivu-tabs:before {
    content: "";
    display: table;
}

.ivu-tabs:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
}

/deep/.ivu-tabs-bar {
    border: 0;
    outline: 0;
}

/deep/.ivu-tabs-ink-bar {
    display: none;
}

/deep/.ivu-tabs-nav-container {
    margin-bottom: -0.026667rem;
    line-height: 2.5;
    font-size: 0.373333rem;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    zoom: 1;
}

/deep/.ivu-tabs-nav-container:after,
/deep/.ivu-tabs-nav-container:before {
    content: "";
    display: table;
}

/deep/.ivu-tabs-nav-container:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
}

/deep/.ivu-tabs-nav-container:focus {
    outline: 0;
}

/deep/.ivu-tabs-nav-container:focus .ivu-tabs-tab-focused {
    border-color: #57a3f3 !important;
    color: #fff;
    position: relative;
}

/deep/.ivu-tabs-nav-container-scrolling {
    padding-left: 0.853333rem;
    padding-right: 0.853333rem;
}

/deep/.ivu-tabs-nav-wrap {
    overflow: hidden;
    margin-bottom: -0.026667rem;
}

/deep/.ivu-tabs-nav-scroll {
    overflow: hidden;
    white-space: nowrap;
}

/deep/.ivu-tabs-nav-right {
    float: right;
    margin-left: 0.133333rem;
}

/deep/.ivu-tabs-nav-prev {
    position: absolute;
    line-height: 1.25rem;
    cursor: pointer;
    left: -0.13rem;
}

/deep/.ivu-tabs-nav-next {
    position: absolute;
    line-height: 1.25rem;
    cursor: pointer;
    right: -0.13rem;
}

/deep/.ivu-tabs-nav-scrollable {
    padding: 0 0.32rem;
}

/deep/.ivu-tabs-nav-scroll-disabled {
    display: none;
}

/deep/.ivu-tabs-nav {
    padding-left: 0;
    margin: 0;
    float: left;
    list-style: none;
    box-sizing: border-box;
    position: relative;
    transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
    color: #bbb;
}

/deep/.ivu-tabs-nav:after,
/deep/.ivu-tabs-nav:before {
    display: table;
    content: " ";
}

/deep/.ivu-tabs-nav:after {
    clear: both;
}

/deep/.ivu-tabs-nav .ivu-tabs-tab-disabled {
    pointer-events: none;
    cursor: default;
    color: #ccc;
}

/deep/.ivu-tabs-nav .ivu-tabs-tab {
    display: inline-block;
    height: 100%;
    padding: 0.213333rem 0;
    margin-right: 0.426667rem;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: color .3s ease-in-out;
}

/deep/.ivu-tabs-nav .ivu-tabs-tab:hover {
    color: #57a3f3;
}

/deep/.ivu-tabs-nav .ivu-tabs-tab:active {
    color: #2b85e4;
}

/deep/.ivu-tabs-nav .ivu-tabs-tab .ivu-icon {
    width: 0.373333rem;
    height: 0.373333rem;
    margin-right: 0.213333rem;
}

/deep/.ivu-tabs-nav .ivu-tabs-tab-active {
    color: #2d8cf0;

    &:after {
        content: "";
        width: 100%;
        height: 2px;
        background: #2d8cf0;
        display: block;
        position: absolute;
        left: 0;
        bottom: 1px;
    }
}

/deep/.ivu-tabs-mini .ivu-tabs-nav-container {
    font-size: 0.373333rem;
}

/deep/.ivu-tabs-mini .ivu-tabs-tab {
    margin-right: 0;
    padding: 0.213333rem 0.426667rem;
    font-size: 0.32rem;
}

/deep/.ivu-tabs .ivu-tabs-content-animated {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    will-change: transform;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
}

/deep/.ivu-tabs .ivu-tabs-tabpane {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    transition: opacity .3s;
    opacity: 1;
    outline: 0;
}

/deep/.ivu-tabs .ivu-tabs-tabpane-inactive {
    opacity: 0;
    height: 0;
}

/deep/.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-nav-container {
    height: 0.853333rem;
}

/deep/.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-ink-bar {
    visibility: hidden;
}

/deep/.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab {
    margin: 0;
    margin-right: 0.106667rem;
    height: 0.826667rem;
    padding: 0.133333rem 0.426667rem 0.106667rem;
    border: 0.026667rem solid #dcdee2;
    border-bottom: 0;
    border-radius: 0.106667rem 0.106667rem 0 0;
    transition: all .3s ease-in-out;
    background: #f8f8f9;
}

/deep/.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab-active {
    height: 0.853333rem;
    padding-bottom: 0.133333rem;
    background: #fff;
    transform: translateZ(0);
    border-color: #dcdee2;
    color: #2d8cf0;
}

/deep/.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-nav-wrap {
    margin-bottom: 0;
}

/deep/.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab .ivu-tabs-close {
    width: 0;
    height: 0.586667rem;
    font-size: 0.586667rem;
    margin-right: 0;
    color: #999;
    text-align: right;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    top: -0.026667rem;
    transform-origin: 100% 50%;
    transition: all .3s ease-in-out;
}

/deep/.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab .ivu-tabs-close:hover {
    color: #444;
}

/deep/.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab-active .ivu-tabs-close,
/deep/.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab:hover .ivu-tabs-close {
    width: 0.586667rem;
    transform: translateZ(0);
    margin-right: -0.16rem;
}

/deep/.ivu-tabs-no-animation>.ivu-tabs-content {
    overflow: auto;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
}

/deep/.ivu-tabs-no-animation>.ivu-tabs-content>.ivu-tabs-tabpane-inactive {
    display: none;
}
</style>
